<template>
  <el-card shadow="never">
    <div slot="header" class="title">
      <b>创建考试</b>
      <el-button
        class="btR"
        size="small"
        type="primary"
        plain
        @click="$emit('change', 0)"
        >返回列表</el-button
      >
    </div>
    <!-- 考试内容 -->

    <el-row>
      <el-col :span="16">
        <el-form
          ref="formData"
          :model="formData"
          :rules="rules"
          label-width="300px"
          :inline="false"
          size="normal"
        >
          <el-form-item required prop="exam_name" label="考试名称">
            <el-input
              v-model="formData.exam_name"
              placeholder="请输入考试名称"
            />
          </el-form-item>

          <el-form-item required prop="exam_type" label="考试类型">
            <el-radio-group v-model="formData.exam_type">
              <el-radio :label="1">阶段测试 </el-radio>
              <el-radio :label="2">综合考试</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item required prop="lock_screen" label="锁屏方式">
            <el-radio-group v-model="formData.lock_screen">
              <el-radio :label="1">不锁屏 </el-radio>
              <el-radio :label="2">锁屏</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item required prop="subject_id" label="归属学科">
            <el-select
              v-model="formData.subject_id"
              placeholder="归属学科"
              clearable
            >
              <el-option
                v-for="item in treeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item required prop="directory_id" label="归属目录">
            <el-select
              v-model="formData.directory_id"
              placeholder="归属目录"
              clearable
            >
              <el-option
                v-for="item in directoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item required prop="main_paper_id" label="主考试卷">
            <el-select
              v-model="formData.main_paper_id"
              placeholder="试卷信息"
              no-data-text="没有试卷信息"
              :disabled="!formData.subject_id || !formData.directory_id"
              clearable
            >
              <el-option
                v-for="item in paperList"
                :key="item.id"
                :label="item.paper_name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item required prop="exam_time" label="考试时长">
            <el-input-number
              v-model="num"
              @change="handleChange"
              :min="1"
              :max="180"
              label="描述文字"
            ></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="onCancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </el-card>
</template>
<script>
import { mapGetters, mapActions } from "vuex";

import { addExam, getPaperList } from "@/api/exam";
const defaultItem = {
  exam_name: "", // 考试名
  subject_id: "", // 学科id
  directory_id: "", // 目录id
  exam_type: 1, // 考试类型
  lock_screen: 1, // 锁定屏幕
  main_paper_id: "", // 主考试卷id
  exam_time: 30,
};
const rules = {
  exam_name: [
    { required: true, message: "请输入考试名", trigger: "blur" },
    { min: 2, max: 9, message: "长度在 2 到 9 个字符", trigger: "blur" },
  ],
  subject_id: [{ required: true, message: "请选择学科", trigger: "blur" }],
  directory_id: [{ required: true, message: "请选择目录", trigger: "blur" }],
  main_paper_id: [{ required: true, message: "选择主考试卷", trigger: "blur" }],
};
export default {
  name: "ExamInfo",
  data() {
    return {
      formData: {
        ...defaultItem,
      },
      rules,
      checkPaperType: "", // 选卷类型 判断1、2或空
      paperList: [], // 试卷列表
      num: 30, //默认时间显示
    };
  },
  computed: {
    ...mapGetters({
      treeList: "subject/treeList",
    }),
    // 目录数据
    directoryList() {
      if (!this.formData.subject_id) {
        return [];
      } else {
        this.formData.directory_id = "";

        const result = this.treeList.find(
          (val) => val.id === this.formData.subject_id
        );
        return result.children;
      }
    },
  },
  watch: {
    "formData.directory_id": function (newval, oldval) {
      if (newval) {
        this.loadPaperList();
      } else {
        this.paperList = [];
      }
    },
  },
  mounted() {
    !this.treeList.length && this.loadTreeList();
  },
  methods: {
    ...mapActions({
      loadTreeList: "subject/loadTreeList",
    }),
    async loadPaperList() {
      // console.log("试卷列表", loadPaperList());
      // 获取试卷列表
      const data = await getPaperList({
        subject_id: this.formData.subject_id,
        directory_id: this.formData.directory_id,
        show_state: 1,
      });
      this.paperList = data.list;
      console.log(1111111123, data.list);
    },
    //计数器
    handleChange(value) {
      this.formData.exam_time = value;

      console.log("时间", value, this.formData.exam_time);
    },
    // 提交事件
    async onSubmit() {
      console.log("--------------1");
      try {
        await this.$refs.formData.validate();
      } catch (error) {
        this.$message.warning("检查提交数据,校验失败");
        console.log("哪里的错误", error);
        console.log(this.formData);
        return false;
      }
      await addExam(this.formData);
      this.$message.success("新增考试成功");
    },
    onCancel() {
      this.formData = { ...defaultItem };

      // 重置表单，移除校验结果
      this.$refs.formData.resetFields();
    },
  },
};
</script>

<style>
.btR {
  float: right;
}
</style>
